import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon, Alert } from 'antd';
import LayoutHeader from './LayoutHeader/LayoutHeader';
import LayoutContent from './LayoutContent/LayoutContent';
import LayoutMenu from './LayoutMenu/LayoutMenu';
import { PathBread } from 'components';
import PropTypes from 'prop-types';
const { SubMenu } = Menu;
const {  Sider } = Layout;
import styles from './MainLayout.less';
export default class MainLayout extends Component {

    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            isTrigger: false
        };
    }

    handleClick = () => {
        const nextCollapsed = !this.state.collapsed;
        const nextTrigger = !this.state.isTrigger;
        this.setState({
            collapsed: nextCollapsed,
            isTrigger: nextTrigger
        });
    }
    render() {
        const { isTrigger } = this.state;
        const { list } = this.props;
        return (
            <Layout className={styles.rootContainer}>
                <LayoutHeader/>
                <Layout className={styles.wrapper}>
                    <Sider
                        className={styles.siderLayout}
                        collapsible
                        trigger={null}
                        collapsed={this.state.collapsed}
                    >
                        <LayoutMenu isTrigger={isTrigger} list={list}/>
                        <div className={styles.trigger} onClick={this.handleClick}>
                            <Icon style={{fontWeight: 'bold'}} type={isTrigger ? 'right' : 'left'}/>
                        </div>
                    </Sider>
                    <Layout className={styles.contentWrapper}>

                        <div className={styles.breadContainer}>
                            <PathBread list={list}/>
                        </div>
                        <LayoutContent list={list}/>
                    </Layout>
                </Layout>
            </Layout>
        );
    }
}
MainLayout.propTypes = {
    list: PropTypes.array,
}
MainLayout.defaultProps = {
    list: []
};